<template>
	<div class="goods">
		<div class="g-menu-warper" ref="menuWraper">
		<ul>
		<li v-for="(item,index) in goods" class="g-menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
			<span class="g-text">
				{{item.name}}{{aa[0].a}}
			</span>
		</li>
		</ul>
		</div>
		<div class="g-goods-warper" ref="foodWraper">
			<ul>
				<li v-for="(item,index) in goods" class="g-food-list food-list-hook">
					<h1 class="g-title">{{item.name}}</h1>
					<ul>
						<li v-for="(food,index1) in item.foods" class="g-in-food" @click="selectFood(food,$event)">
							<div class="g-in-icon">
								<img :src="food.icon" />
							</div>
							<div class="g-in-content">
								<h2 class="g-in-name">{{food.name}}</h2>
								<p class="g-in-des">{{food.description}}</p>
								<div class="g-in-like">
									<span class="g-in-count">月售{{food.sellCount}}</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="g-in-price">
									<span class="g-new">￥{{food.price}}</span>
									<span class="g-old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartwraper">
									<change :food="food"></change>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	<shopcart v-on:chang="selectFoods" :aa="aa" :deliverPrice="seller.deliveryPrice"  :minprice="seller.minPrice" :selectFoods="selectFoods"></shopcart>
	<food :food="selectdFood" ref="food1"></food>
	</div>
</template>

<script>
	import food from './food/food'
	import change from './shopcart/change'
	import BScroll from 'better-scroll'
	import shopcart from './shopcart/shopcart'
	export default{
		data() {
			return {
				goods:[],
				listHeight:[],
				scrollY:0,
				selectdFood:{},
				a:1
			}
		},
		props:['seller'],
		computed:{
			aa:function(){
				return [{
					a:this.a
				}]
			},
			currentIndex:function(){
				for(var i=0;i<this.listHeight.length;i++){
					var height1=this.listHeight[i];
					var height2=this.listHeight[i+1];
					if(!height2 || this.scrollY>=height1&&this.scrollY<height2){
						return i;
					}
				}
				return 0;
			},
			selectFoods:function(){
				var foodss=[];
				this.goods.forEach(function(good){
					good.foods.forEach(function(food){
						if(food.count){
							foodss.push(food);
						}
					});
				});
				return foodss;
			},
			
		},
		
		mounted:function(){
		    this.getGoods();
	    },
	    methods:{
	    	selectFood:function(food,$event){
	    		if(!$event._constructed){
	    			return;
	    		}
	    		this.selectdFood=food;
	    		this.$refs.food1.show();
	    	},
	    	selectMenu:function(index,$event){
	    		if(!$event._constructed){
	    			return;
	    		}
	    		var foodlist=this.$refs.foodWraper.getElementsByClassName("food-list-hook");
	    		var el=foodlist[index];
	    		this.foodScroll.scrollToElement(el,500);
	    	},
	    	getGoods:function(){
	    	var _this=this;
			this.$http.get("static/data.json").then(response => {
				console.log(response.data)
				_this.goods=response.data.goods;
				this.$nextTick(function(){
					this.initScroll();
					this.caclulateHeight();
				})
			})
	    	},
	    	initScroll:function(){
	    		var _this=this;
	    		this.menuScroll=new BScroll(this.$refs.menuWraper,{
	    			click:true
	    		});
	    		this.foodScroll=new BScroll(this.$refs.foodWraper,{
	    			click:true,
	    			probeType:3
	    		});
	    		this.foodScroll.on('scroll',function(pos){
	    			_this.scrollY=Math.abs(Math.round(pos.y));
	    		});
	    	},
	    	caclulateHeight:function(){
	    		var foodlist=this.$refs.foodWraper.getElementsByClassName("food-list-hook");
	    		var height=0;
	    		this.listHeight.push(height);
	    		for(var i=0;i<foodlist.length;i++){
	    			height+=foodlist[i].clientHeight;
	    			this.listHeight.push(height);
	    		}
	    	}
	    },
	    components:{
	    	shopcart,
	    	change,
	    	food
	    }
	}
</script>

<style>
	.goods{
		display: flex;
		position: absolute;
		top: 0;
		bottom: 46px;
		width: 100%;
		overflow: hidden;
	}
	.g-goods-warper{
		flex: 1;
	}
	.g-menu-warper{
		flex: 0 0 80px;
		width: 80px;
		background: #f3f5f7;
		line-height: 14px;
	}
	.g-menu-item{
		padding: 0 12px;
		display: table;
		height: 54px;
		width: 56px;
	}
	.g-text{
		text-align: center;
		display: table-cell;
		font-size: 12px;
		width: 56px;
		vertical-align: middle;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.g-title{
		padding-left: 14px;
		height: 26px;
		line-height: 26px;
		border-left: 1px solid #d9dde1;
		font-size: 12px;
		color: rgb(147,153,159);
		background: #F3F5F7;
	}
	.g-in-food{
		padding-bottom: 18px;
		display: flex;
		margin: 18px;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.g-in-food:last-child{
		border-bottom: 0px ;
		margin-bottom: 0;
	}
	.g-in-icon{
		flex: 0 0 57;
		margin-right: 10px;
		
	}
	.g-in-content{
		position: relative;
		flex: 1;
	}
	.g-in-name{
		margin: 2px 0 2px 0;
		
		line-height: 14px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.g-in-des{
		margin-bottom: 8px;
		font-size: 10px;
		line-height: 10px;
		color: rgb(147,153,159);
	}
	.g-in-like{
		font-size: 10px;
		line-height: 10px;
		color: rgb(147,153,159);
	}
	.g-in-count{
		margin-right: 12px;
		
	}
	.g-in-price{
		font-weight: 700;
		line-height: 24px;
		
	}
	.g-new{
		margin-right: 8px;
		font-size: 14px;
		color: rgb(240,20,20);
		
	}
	.g-old{
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.current{
		position: relative;
		background: #FFFFFF;
		font-weight: 700;
		
	}
	.cartwraper{
		position: absolute;
		right: 0;
		bottom: 12px;
		color: rgb(0,160,220);
	}
	.decrease1{
		display: inline-block;
		transition: all 1s linear;
	}
	.c-inner{
		display: inline-block;
		opacity: 0.3;
		width: 20px;
		height: 20px;
		font-size: 20px;
		line-height: 20px;
		padding: 6px;
		background: black;
		border-radius:50% ;
		text-align: center;
		transition: all 1s linear;
	}
	.c-count{
		display: inline-block;
		padding: 6px;
	}
	.increase{
		opacity: 0.3;
		text-align: center;
		width: 20px;
		height: 20px;
		display: inline-block;
		padding: 6px;
		font-size: 20px;
		line-height: 20px;
		background: blue;
		border-radius:50% ;
	}
	
	.fade1-enter,.fade1-leave-to{
		transform: translateX(24px) scale(0.5);
	}
	.fade1-leave-to .c-inner{
		transform: rotateZ(90deg);
	}
	.fade1-enter .c-inner{
		transform: rotateZ(90deg);
	}
	.fade1-enter-active{
		transition: all 0.2s linear;
	}
	.fade1-leave-active{
		transition: all 0.2s linear;
	}
</style>